<template>
  <div class="content" v-loading="loading">
    <div class="inputLine flexBet">
      <div class="flex">
        <el-input
          style="width: 320px"
          @input="getList"
          v-model="queryParams.teacherNameOrNum"
          placeholder="请输入教师姓名/工号"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <div class="box" v-if="userList.length > 0">
      <div class="item rela" v-for="(item, index) in userList" :key="index">
        <div
          class="stop absolute"
          v-if="item.teacherStatus == 1 || item.teacherStatus == 2"
        >
          {{ item.teacherStatus == 1 ? '已停用' : '已删除' }}
        </div>
        <!-- 名字行 -->
        <div class="flexColCenter nameLine">
          <div class="nameLine_color">{{ item.teacherName.slice(0, 1) }}</div>
          <div
            :class="[
              'nameLine_name',
              $store.getters.teacherId == item.teacherId ? 'isMine' : '',
            ]"
          >
            {{ item.teacherName }}
          </div>
          <img
            v-if="item.leaderFlag == 1"
            class="nameLine_img"
            src="@/assets/images/disciplineGroup/leadericon.png"
            alt=""
          />
        </div>
        <!-- 学号 -->
        <div class="flexColCenter numLine">
          <img
            class="numLine_img"
            src="@/assets/images/disciplineGroup/num.png"
            alt=""
          />
          <div class="numLine_num">{{ item.teacherNum }}</div>
        </div>
        <!-- 电话 -->
        <div class="flexColCenter callLine">
          <img
            class="callLine_img"
            src="@/assets/images/disciplineGroup/call.png"
            alt=""
          />
          <div class="callLine_num">{{ item.phoneNumber | regPhone }}</div>
        </div>
      </div>
    </div>
    <div
      style="width: 100%; height: 100%"
      v-if="userList.length == 0"
      class="flexCen flexColCenter"
    >
      <el-empty description="暂无成员~"></el-empty>
    </div>
  </div>
</template>

<script>
import { branchDisciplineTeacherList } from '@/api/disciplineGroup/disciplineGroup'

export default {
  props: {
    activeIndex: [Number, String],
    disciplineGroupId: [Number, String]
  },
  data() {
    return {
      queryParams: {
        teacherNameOrNum: ''
      },
      loading: false,
      userList: []
    }
  },
  watch: {
    activeIndex: {
      async handler(val) {
        if (val == 3) {
          this.getList()
        }
      },
      immediate: true
    },
    disciplineGroupId() {
      if (this.activeIndex == 3) {
        this.getList()
      }
    }
  },
  methods: {
    async getList() {
      this.$emit('loading', true)
      try {
        const res = await branchDisciplineTeacherList({
          disciplineGroupId: this.disciplineGroupId,
          teacherNameOrNum: this.queryParams.teacherNameOrNum
        })
        if (res.code == 200) {
          this.userList = res.data
        }
      } finally {
        this.$emit('loading', false)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.isMine {
  color: #28b28b !important;
}

@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;

  &:active {
    background: darken($bg_color, 5%);
    color: darken($color, 18%);
  }

  &:disabled {
    background: lighten($bg_color, 5%);
    color: lighten($color, 40%);
  }

  @content;
}

.upload {
  @include btn_plain(#28b28b, #ffffff) {
    margin-left: 15px;
    width: 80px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #edeff0;

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
  }
}

.sort {
  @include btn_plain(#ffffff, #28b28b) {
    width: 80px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #edeff0;

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
  }
}

.content {
  height: calc(100vh - 310px + 120px);
  display: flex;
  box-sizing: border-box;
  flex-direction: column;

  .inputLine {
    height: 64px !important;
    box-sizing: border-box;
    padding: 24px 34px 0 19px;
  }

  .box {
    align-content: flex-start !important; /* 避免行间多余空白 */
    margin: 24px 0 0 0;
    padding: 0 0 0 19px;
    flex: 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .item {
      .stop {
        width: 200px;
        height: 108px;
        background: rgba($color: #000000, $alpha: 0.4);
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 108px;
        text-align: center;
        font-style: normal;
        border-radius: 12px;

        top: 0;
        left: 0;
      }

      margin: 0 24px 24px 0;
      width: 200px;
      height: 108px;
      border-radius: 12px;
      background: url("../../../assets/images/disciplineGroup/cardbg.png");
      background-size: 200px 108px;
      box-sizing: border-box;
      padding: 11px 0;

      .nameLine {
        padding-left: 16px;
        height: 40px;

        .nameLine_color {
          width: 40px;
          height: 40px;
          background: #4e8dff;
          border-radius: 8px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          font-size: 22px;
          color: #ffffff;
          line-height: 40px;
          text-align: center;
          font-style: normal;
        }

        .nameLine_name {
          margin-left: 10px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          font-size: 18px;
          color: #333333;
          line-height: 18px;
          text-align: left;
          font-style: normal;
        }

        .nameLine_img {
          width: 34px;
          height: 14px;
          margin-left: 10px;
        }
      }

      .numLine {
        padding: 8px 0 0 28px;
        height: 20px;

        .numLine_img {
          width: 16px;
          height: 16px;
        }

        .numLine_num {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          margin-left: 26px;
        }
      }

      .callLine {
        padding: 2px 0 0 28px;

        .callLine_img {
          width: 16px;
          height: 16px;
        }

        .callLine_num {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          margin-left: 26px;
        }
      }
    }
  }
}
</style>
